<template>
	<view>
		<view class="tab-bar">
			<view :class="type == 1 ? color + '-color' : ''" @click="goreto('active?type=1')">我创建的</view>
			<view :class="type == 2 ? color + '-color' : ''" @click="goreto('active?type=2')">我参与的</view>
			<view :class="type == 3 ? color + '-color' : ''" @click="goreto('active?type=3')">我报名的</view>
		</view>

		<u-empty v-if="list.length == 0" :customStyle="{ paddingTop: '200px' }"></u-empty>
		<view class="list" v-else>
			<view class="item" v-for="(item, index) in list" :key="index" @click="goto(item.id,item.mold)">
				<view class="img">
					<image :src="imgUrl + item.image" v-if="item.mold<4"></image>
					<image :src="system.domain+'/assets/addons/kzvote/img/pk_f.png'" v-else></image>
				</view>
				<view class="txt">
					<view class="title">{{ item.name }}</view>
					<view class="time">
						<u-row justify="space-between">
							<u-col span="9.8">
								<u-text :text="'截止日期：' + item.end_time_text" size="12"></u-text>
							</u-col>
							<u-col span="2.2">
								<u-tag text="待审核" type="warning" v-if="item.check == 0" size="mini"></u-tag>
								<u-tag text="已驳回" type="error" v-else-if="item.check == 2" size="mini"></u-tag>
								<block v-else>
									<u-tag text="进行中" type="success" v-if="item.status == 10" size="mini"></u-tag>
									<u-tag text="暂停中" type="warning" v-else-if="item.status == 20" size="mini"></u-tag>
									<u-tag text="删除" type="error" v-else-if="item.status == 30" size="mini"></u-tag>
									<u-tag text="未开始" borderColor="#fcbd71" bgColor="#fcbd71"
										v-else-if="item.status == 40" size="mini"></u-tag>
									<u-tag text="已结束" borderColor="#c8c9cc" bgColor="#c8c9cc"
										v-else-if="item.status == 50" size="mini"></u-tag>
								</block>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				system: 'common/system',
				imgUrl: 'common/cdnurl',
				color: 'common/color',
			})
		},
		data() {
			return {
				type: 1,
				list: [],
				page: 1,
				has_more: true
			};
		},
		onLoad: function(options) {
			this.utils.hideShare()
			this.type = options.type ? options.type : 1;
			this.ajax();
		},
		onReachBottom() {
			if (this.has_more) {
				this.ajax();
			}
		},
		methods: {
			ajax() {
				this.http('vote/active', {
					type: this.type
				}, 'get').then(res => {
					var data = res.data.data;
					if (data) {
						for (var i in data) {
							if (data[i]['start_time'] * 1000 > Date.parse(new Date())) {
								data[i]['status'] = 40;
								data[i]['status_text'] = '未开始';
							}
							if (data[i]['end_time'] * 1000 < Date.parse(new Date())) {
								data[i]['status'] = 50;
								data[i]['status_text'] = '已结束';
							}
						}
						data.sort(function(x, y) {
							return x.status - y.status;
						});
						this.list = this.list || [];
						this.list = this.list.concat(data);
						this.page++;
						this.has_more = res.data.has_more;
					}
				});
			},
			goreto(url) {
				this.utils.goreto(url);
			},
			goto(id, mold) {
				if (this.type == 1) {
					this.utils.goto('/pages/manage/manage?id=' + id);
				} else {
					if (mold < 3){
						this.utils.goto('/pages/vote/index?vote_id=' + id);
					}else if (mold == 3){
						this.utils.goto('/pages/vote/text?vote_id=' + id);
					}else{
						this.utils.goto('/pages/vote/pk?vote_id=' + id);
					}
				}
			}
		}
	};
</script>

<style lang="scss">
	.tab-bar {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		display: flex;

		view {
			flex: 1;
			font-size: 14px;
			display: block;
			padding: 0 24rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
		}
	}

	.list {
		width: 100%;
		height: auto;
		margin-top: 60px;
		padding-bottom: 10px;
	}

	.item {
		width: 100%;
		height: 130px;
		margin: 0 auto;
		background: #fff;
		margin-top: 10px;
		padding: 15px 10px;
		display: flex;
	}

	.img {
		flex-grow: 1;
		max-width: 100px;
	}

	.img image {
		width: 100px;
		height: 100px;
		border-radius: 5px;
	}

	.txt {
		flex-grow: 2;
		height: 100px;
		padding-left: 10px;
	}

	.title {
		width: 100%;
		height: 80px;
		line-height: 20px;
		word-break: break-all;
		overflow: hidden;
		text-align: left;
	}

	.time {
		width: 100%;
		height: 20px;
		line-height: 20px;
		margin: 0 auto;
		color: #999;
		font-size: 12px;
		text-align: left;
	}

	.time text {
		float: right;
		font-size: 14px;
	}
</style>
